import React, {Component} from 'react';
import {View, Text, ViewPropTypes, StyleSheet, StatusBar, Platform} from 'react-native';
import PropTypes from 'prop-types';

// ios下navBar高度
const NAV_BAR_HEIGHT_IOS = 44;
// android下navBar高度
const NAV_BAR_HEIGHT_ANDROID = 50;
// 状态栏高度
const STATUS_BAR_HEIGHT = 20;
// 状态栏属性类型
const StatusBarShap = {
  barStyle: PropTypes.oneOf(['light-content', 'default']),
  hidden: PropTypes.bool,
  backgroundColor: PropTypes.string
};

/**
 * 自定义NavigationBar组件
 */
export default class NavigationBar extends Component {

  /**
   * 定义props属性类型
   * @type {{style, title: shim, titleView: shim, titleLayoutStyle, hide: shim, statusBar, leftButton: shim, rightButton: shim}}
   */
  static propTypes = {
    style: ViewPropTypes.style,
    title: PropTypes.string,
    titleView: PropTypes.element,
    titleLayoutStyle: ViewPropTypes.style,
    hide: PropTypes.bool,
    statusBar: PropTypes.shape(StatusBarShap),
    leftButton: PropTypes.element,
    rightButton: PropTypes.element
  };
  /**
   * props默认属性
   * @type {{style: {}, titleLayoutStyle: {}, hide: boolean, statusBar: {barStyle: string, hidden: boolean, backgroundColor: string}}}
   */
  static defaultProps = {
    style: {},
    titleLayoutStyle: {},
    hide: false,
    statusBar: {
      barStyle: 'light-content',
      hidden: false,
      backgroundColor: '#2196f3'
    }
  };

  /**
   * 生成按钮
   * @param data
   * @returns {*}
   */
  getButtonElement(data) {
    return (
      <View style={styles.navBarButton}>
        {data ? data : null}
      </View>
    )
  }

  render() {
    // 定义状态栏
    const statusBar = this.props.statusBar.hidden ? null :
      <View style={styles.statusBar}>
        <StatusBar {...this.props.statusBar}/>
      </View>;
    // 定义标题组件
    const titleView = this.props.titleView ? this.props.titleView :
      <Text ellipsizeMode={'head'} numberOfLines={1} style={styles.title}>
        {this.props.title}
      </Text>;
    // 定义navBar内容
    const content = this.props.hide ? null :
      <View style={styles.navBar}>
        {this.getButtonElement(this.props.leftButton)}
        <View style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
          {titleView}
        </View>
        {this.getButtonElement(this.props.rightButton)}
      </View>;
    return (
      <View style={[styles.container, this.props.style]}>
        {statusBar}
        {content}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#678',
  },
  statusBar: {
    height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0
  },
  title: {
    fontSize: 20,
    color: 'white'
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    /**
     * 根据系统类型，定义navBar高度
     */
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID
  },
  navBarButton: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  navBarTitleContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 40,
    right: 40,
    top: 0,
    bottom: 0
  }
});